<script setup>
import { Edit, Delete, Position, Upload, Promotion, Bell } from "@element-plus/icons-vue";

import { ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  addcontractservice,
  deletecontractservice,
  getpartstaffservice,
  updatepathservice,
  deletepathservice,
  deletestaffservice,
  updatestaffservice,
  getUserByTypeService
} from "@/api/book.js";
import { getquoteservice, addphaseservice } from "@/api/allApi.js";
import { addApprovalservice, getApprovalByContractIdservice, deleteApprovalservice } from "@/api/approval.js";

import {
  loadquoteproductionsservice,
  getcontractsservice,
  deletephaseservice,
  updatephaseservice,
  getPayPhaseByContractIdservice,
  updatecontractservice,
} from "@/api/client.js";

import {
    userInfoService,
    userLoginService
} from '@/api/user.js'
//控制添加分类弹窗
const dialogVisible = ref(false);
const dialogVisible2 = ref(false);
const dialogVisible3 = ref(false);
//分页条数据模型
//const pageNum = ref(1)//当前页
const total = ref(20); //总条数
//const pageSize = ref(3)//每页条数
//文章分类数据模型

//定义变量，控制标题
const title = ref("");
const titlephase = ref("");
//交通路线列表数据模型
const majors = ref([]);
const payphases = ref([]);
const quotes = ref([]);
const productions = ref([]);
//与后端交互的json数据

const pathmodel = ref({
  id: null,
  name: null,
  quoteid: null,
  signedtime: null,
  deliverytime: null,
  comment: null,
  paichantime: null,
  goodsarrival: null,
  freightpay: null,
  payway: null,
  allprices: null,
  address: null,
  clientcompanyname: null,
  orderdaibiao: null,
  phone: null,
  zipcode: null,
  areaname: null,
});

const findmodel = ref({
  pageNum: 1,
  pageSize: 5,
  str: "",
});
const stafflist = async () => {
  console.log(findmodel.value);
  let result = await getcontractsservice(findmodel.value);
  console.log(result);
  total.value = result.data.total;
  majors.value = result.data.items;
};
stafflist();
const getquotes = async () => {
  let result = await getquoteservice({
    pageNum: 1,
    pageSize: 1000,
    str: "",
  });
  quotes.value = result.data.items;
  console.log(quotes.value);
  console.log(quotes.value[0].quotename);
};
getquotes();

//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
  findmodel.value.pageSize = size;
  stafflist();
};
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
  findmodel.value.pageNum = num;
  stafflist();
};
const cleardata = () => {
  findmodel.value.str = "";
};
//表单校验
const rules = {
  name: [{ required: true, message: "请输入名称", trigger: "blur" }],
  oughtpay: [{ required: true, message: "请输入应付金额", trigger: "blur" },
  {
            validator: (rule, value, callback) => {
                if (value < 0) {
                    callback(new Error('金额不能为负数'));
                } else {
                    callback();
                }
            }, trigger: 'blur'
        }

  ],
  oughttime: [{ required: true, message: "请输入应付日期", trigger: "blur" }],
  comment: [{ required: true, message: "请输入备注", trigger: "blur" }],
  quoteid: [{ required: true, message: "请选择...", trigger: "blur" }],
  signedtime: [{ required: true, message: "请选择签订日期", trigger: "blur" }],
  deliverytime: [
    { required: true, message: "请选择交货日期", trigger: "blur" },
  ],
  paichantime: [{ required: true, message: "请选择排产日期", trigger: "blur" }],

  goodsarrival: [
    { required: true, message: "请输入货物到站", trigger: "blur" },
  ],
  freightpay: [{ required: true, message: "请输入运费支付", trigger: "blur" }],
  payway: [{ required: true, message: "请输入付款方式", trigger: "blur" }],
};
const add = () => {
  for (let key in pathmodel.value) {
    if (pathmodel.value.hasOwnProperty(key)) {
      pathmodel.value[key] = null;
    }
  }
  dialogVisible.value = true;
  payphases.value = [];
  title.value = "添加合同";
};
const formref = ref(null);
const addstaff = async () => {
  formref.value.validate(async (valid) => {
    if (!valid) {
      ElMessage.error("信息填写不完整！");
    } else {
      let result = await addcontractservice(pathmodel.value);
      let result2 = await addphaseservice(result.data, payphases.value);

      console.log(result);
      if (result.code == 0 && result2.code == 0) {
        ElMessage.success("添加成功");
        dialogVisible.value = false;
        stafflist();
      } else {
        ElMessage.error(result.message ? result.message : "添加失败");
      }
    }
  });
};
const updatestaff = async () => {
  formref.value.validate(async (valid) => {
    if (!valid) {
      ElMessage.error("信息填写不完整！");
    } else {
      for (let i = 0; i < payphases.value.length; i++)
        payphases.value[i].contract = null;
      console.log(payphases.value);
      let result = await updatecontractservice(pathmodel.value);
      let result2 = await updatephaseservice(
        pathmodel.value.id,
        payphases.value
      );
      if (result.code == 0 && result2.code == 0) {
        ElMessage.success("修改成功");
        dialogVisible.value = false;
        stafflist();
      } else {
        ElMessage.error(result.message ? result.message : "修改失败");
      }
    }
  });
};
//删除分类
const del = (row) => {
  ElMessageBox.confirm("你确认删除该条信息吗？", "温馨提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      //用户点击了确认
      let result = await deletecontractservice(row.id);
      if (result.code != 0)
        ElMessage.error(result.message ? result.message : "删除失败");
      else ElMessage.success("删除成功");
      //再次调用getAllCategory，获取所有文章分类
      stafflist();
    })
    .catch(() => {
      //用户点击了取消
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};
//展示编辑弹窗
const showDialog = async (row) => {
  title.value = "编辑合同信息";
  dialogVisible.value = true;
  //数据拷贝
  Object.keys(row).forEach((key) => {
    if (key != "quote") pathmodel.value[key] = row[key]; //!!!!!!!!!!!!!!!!!!!!关联的实体必须为空
  });
  pathmodel.value.allprices = row.quote.allprices;
  pathmodel.value.clientcompanyname =
    row.quote.chance.clientCompany.clientcompanyname;
  pathmodel.value.address = row.quote.chance.clientCompany.address;
  pathmodel.value.orderdaibiao = row.quote.chance.clientCompany.orderdaibiao;
  pathmodel.value.phone = row.quote.chance.clientCompany.phone;
  pathmodel.value.zipcode = row.quote.chance.clientCompany.zipcode;
  pathmodel.value.areaname = row.quote.chance.clientCompany.areaname;
  let result = await loadquoteproductionsservice(row.quoteid);
  productions.value = result.data;
  console.log(productions.value);
  let result2 = await getPayPhaseByContractIdservice(row.id);
  payphases.value = result2.data;
};
const getpayphases = async () => {
  let result2 = await getPayPhaseByContractIdservice(pathmodel.value.id);
  payphases.value = result2.data;
};
const activeTab = ref("first"); // 当前激活的标签页
const handleTabClick = (tab) => {
  // findmodel.value.findType = tab.props.label;
  // pathmodel.value.type = tab.props.label;
};
const dialogVisiblephase = ref(false);

const pathmodelphase = ref({
  id: null,
  name: null,
  oughtpay: null,
  oughttime: null,
  paypay: null,
  paytime: null,
  comment: null,
});
const formrefphase = ref(null);
const addphasepre = () => {
  titlephase.value = "添加付款阶段";
  // 创建 pathmodelphase.value 的深拷贝
  const pathmodelphaseCopy = JSON.parse(JSON.stringify(pathmodelphase.value));
  // 将深拷贝的属性赋值为 null
  for (let key in pathmodelphaseCopy) {
    if (pathmodelphaseCopy.hasOwnProperty(key)) {
      pathmodelphaseCopy[key] = null;
    }
  }
  // 更新 pathmodelphase.value 为新的深拷贝
  pathmodelphase.value = pathmodelphaseCopy;
  dialogVisiblephase.value = true;
};
const addphase = () => {
  formrefphase.value.validate(async (valid) => {
    if (!valid) {
      ElMessage.error("信息填写不完整！");
    } else {
      pathmodelphase.value.paypay = 0;
      payphases.value.push(pathmodelphase.value);
      dialogVisiblephase.value = false;
    }
  });
};

const delphase = async (row) => {
  console.log(row);
  if (row.id == null) {
    payphases.value = payphases.value.filter((r) => r !== row); // 过滤掉row对象
    ElMessage.success("删除成功");
  } else {
    let result = await deletephaseservice(row.id);
    if (result.code != 0)
      ElMessage.error(result.message ? result.message : "删除失败");
    else {
      ElMessage.success("删除成功");
      getpayphases();
    }
  }
};

const handleQuoteChange = async (id) => {
  console.log(id);
  const cc = quotes.value.find((quotes) => quotes.id === id)
    ? quotes.value.find((quotes) => quotes.id === id)
    : null;
  console.log(cc);
  if (cc != null) {
    pathmodel.value.quoteid = cc.id;
    pathmodel.value.allprices = cc.allprices;
    pathmodel.value.clientcompanyname =
      cc.chance.clientCompany.clientcompanyname;
    pathmodel.value.address = cc.chance.clientCompany.address;
    pathmodel.value.orderdaibiao = cc.chance.clientCompany.orderdaibiao;
    pathmodel.value.phone = cc.chance.clientCompany.phone;
    pathmodel.value.zipcode = cc.chance.clientCompany.zipcode;
    pathmodel.value.areaname = cc.chance.clientCompany.areaname;
    let result = await loadquoteproductionsservice(cc.id);
    productions.value = result.data;
  } else {
    pathmodel.value.allprices = null;
    pathmodel.value.clientcompanyname = null;
    pathmodel.value.address = null;
    pathmodel.value.orderdaibiao = null;
    pathmodel.value.phone = null;
    pathmodel.value.zipcode = null;
    pathmodel.value.areaname = null;
    productions.value = [];
  }
};


const areaMasterOptions = ref({

})
const sectorMasterOptions = ref({

})
const companyMasterOptions = ref({

})
const financeMasterOptions = ref({

})

const userfindmodel = ref({
  pageNum: 1,
  pageSize: 5,
  str: ""
})

const delmodel = ref({
  pageNum: 1,
  pageSize: 5,
  str: null,
  findType: null
})

const tempUserModel = ref({
  areaMaster: null,
  sectorMaster: null,
  companyMaster: null,
  financeMaster: null
})

const approvalmodel = ref({
  contractid: null,
  userid: null,
  nodes: null,
  actiontime: null,
  phase: null

})

const clearTempUserModel = () => {

  tempUserModel.value = {};
}

const getareaMasterOptions = async () => {
  userfindmodel.value.str = "片区负责人";

  let result = await getUserByTypeService(userfindmodel.value);

  //console.log("客户是" + findmodelkey.value.clientcompanyid);
  //console.log("关键人物数据是" + JSON.stringify(result.data));
  areaMasterOptions.value = result.data;

}

const getsectorMasterOptions = async () => {
  userfindmodel.value.str = "部门负责人";

  let result = await getUserByTypeService(userfindmodel.value);

  //console.log("客户是" + findmodelkey.value.clientcompanyid);
  //console.log("关键人物数据是" + JSON.stringify(result.data));
  sectorMasterOptions.value = result.data;

}
const getcompanyMasterOptions = async () => {
  userfindmodel.value.str = "公司领导";

  let result = await getUserByTypeService(userfindmodel.value);

  //console.log("客户是" + findmodelkey.value.clientcompanyid);
  //console.log("关键人物数据是" + JSON.stringify(result.data));
  companyMasterOptions.value = result.data;

}
const getfinanceMasterOptions = async () => {
  userfindmodel.value.str = "财务总监";

  let result = await getUserByTypeService(userfindmodel.value);

  //console.log("客户是" + findmodelkey.value.clientcompanyid);
  //console.log("关键人物数据是" + JSON.stringify(result.data));
  financeMasterOptions.value = result.data;


}
const addapprovalMaster1 = async () =>{

  approvalmodel.value.nodes = '创建人';
  approvalmodel.value.actiontime = new Date().toISOString();
  approvalmodel.value.phase = '已提交';
  let userresultlogin = await userInfoService();
  approvalmodel.value.userid = userresultlogin.data.id;
  await addApprovalservice(approvalmodel.value);

  approvalmodel.value.nodes = '片区负责人';
  approvalmodel.value.actiontime = new Date().toISOString();
  approvalmodel.value.phase = '未查看';
  for (const userId of tempUserModel.value.areaMaster)
{
  approvalmodel.value.userid = userId;
  await addApprovalservice(approvalmodel.value);
}
}
const addapprovalMaster2 = async () =>{

  approvalmodel.value.nodes = '创建人';
  approvalmodel.value.actiontime = new Date().toISOString();
  approvalmodel.value.phase = '已提交';
  let userresultlogin = await userInfoService();
  approvalmodel.value.userid = userresultlogin.data.id;
  await addApprovalservice(approvalmodel.value);

  approvalmodel.value.nodes = '部门负责人';
  approvalmodel.value.actiontime = new Date().toISOString();
  approvalmodel.value.phase = '未查看';
  for (const userId of tempUserModel.value.sectorMaster)
{
  approvalmodel.value.userid = userId;
  await addApprovalservice(approvalmodel.value);
}
}
const addapprovalMaster3 = async () =>{

  approvalmodel.value.nodes = '创建人';
  approvalmodel.value.actiontime = new Date().toISOString();
  approvalmodel.value.phase = '已提交';
  let userresultlogin = await userInfoService();
  approvalmodel.value.userid = userresultlogin.data.id;
  await addApprovalservice(approvalmodel.value);



  approvalmodel.value.nodes = '公司领导';
  approvalmodel.value.actiontime = new Date().toISOString();
  approvalmodel.value.phase = '未查看';
  for (const userId of tempUserModel.value.companyMaster)
{
  approvalmodel.value.userid = userId;
  await addApprovalservice(approvalmodel.value);
}
}
const addapprovalMaster4 = async () =>{

  approvalmodel.value.nodes = '创建人';
  approvalmodel.value.actiontime = new Date().toISOString();
  approvalmodel.value.phase = '已提交';
  let userresultlogin = await userInfoService();
  approvalmodel.value.userid = userresultlogin.data.id;
  await addApprovalservice(approvalmodel.value);



  approvalmodel.value.nodes = '财务总监';
  approvalmodel.value.actiontime = new Date().toISOString();
  approvalmodel.value.phase = '未查看';
  for (const userId of tempUserModel.value.financeMaster)
{
  approvalmodel.value.userid = userId;
  await addApprovalservice(approvalmodel.value);
}
}

const processApprovals = async () => {



  
  let result = null;
  const keys = Object.keys(tempUserModel.value);
  for (const key of keys) {
    const array = tempUserModel.value[key];

    switch (key) {
      case 'areaMaster':
      approvalmodel.value.nodes = '片区负责人';
        break;
      case 'sectorMaster':
      approvalmodel.value.nodes = '部门负责人';
        break;
      case 'companyMaster':
      approvalmodel.value.nodes = '公司领导';
        break;
      case 'financeMaster':
      approvalmodel.value.nodes = '财务总监';
        break;
      default:
        // 可以在这里处理其他情况或者不做任何操作
        break;
    }
    if (Array.isArray(array) && array.length > 0) {

      for (const userId of array) {
        approvalmodel.value.userid = userId;

    
        // 调用服务添加审批
        result =  await addApprovalservice(approvalmodel.value);
      }
    }
  }

    ElMessage.success("添加成功");
  

};

const approval = async (row) => {
  title.value = '审批结点配置';
  clearTempUserModel();
  getareaMasterOptions();
  getsectorMasterOptions();
  getcompanyMasterOptions();
  getfinanceMasterOptions();

  dialogVisible2.value = true;
  approvalmodel.value.contractid = row.id;
  delmodel.value.str = row.id;
}

const addapproval = async (row) => {

  approvalmodel.value.nodes = '创建人';
  approvalmodel.value.actiontime = new Date().toISOString();
  approvalmodel.value.phase = '已提交';
  let userresultlogin = await userInfoService();
  approvalmodel.value.userid = userresultlogin.data.id;
  await addApprovalservice(approvalmodel.value);


  approvalmodel.value.actiontime = new Date().toISOString();
  approvalmodel.value.phase = '未查看';
  processApprovals();
  dialogVisible2.value = false;
}


const findApByConIdModel = ref({
  pageNum: 1,
  pageSize: 5,
  str: ""
}) 
const getApprovalTrace = async (row) => {
    title.value = "流程过程状态";
  dialogVisible3.value = true;
  findApByConIdModel.value.str = row.id;
  
  let result = await getApprovalByContractIdservice(findApByConIdModel.value);
  processes.value = result.data;
}

const processes = ref([]);

const delapprovalMaster = async () => {
  const areaMasterArray = tempUserModel.value.areaMaster;
  if (Array.isArray(areaMasterArray)) {
    for (const item of areaMasterArray) {
      // 将当前元素赋值给delModel.value.findType
      delmodel.value.findType = item;
      // 执行删除操作
      await deleteApprovalservice(delmodel.value.str, delmodel.value.findType);
    }
  }
  ElMessage.success("删除成功");
}

const delapprovalMaster2 = async () => {
  const areaMasterArray = tempUserModel.value.sectorMaster;
  if (Array.isArray(areaMasterArray)) {
    for (const item of areaMasterArray) {
      // 将当前元素赋值给delModel.value.findType
      delmodel.value.findType = item;
      // 执行删除操作
      await deleteApprovalservice(delmodel.value.str, delmodel.value.findType);
    }
  }
  ElMessage.success("删除成功");
}
const delapprovalMaster3 = async () => {
  const areaMasterArray = tempUserModel.value.companyMaster;
  if (Array.isArray(areaMasterArray)) {
    for (const item of areaMasterArray) {
      // 将当前元素赋值给delModel.value.findType
      delmodel.value.findType = item;
      // 执行删除操作
      await deleteApprovalservice(delmodel.value.str, delmodel.value.findType);
    }
  }
  ElMessage.success("删除成功");
}
const delapprovalMaster4 = async () => {
  const areaMasterArray = tempUserModel.value.financeMaster;
  if (Array.isArray(areaMasterArray)) {
    for (const item of areaMasterArray) {
      // 将当前元素赋值给delModel.value.findType
      delmodel.value.findType = item;
      // 执行删除操作
      await deleteApprovalservice(delmodel.value.str, delmodel.value.findType);
    }
  }
  ElMessage.success("删除成功");
}

</script>

<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>合同基本信息管理</span>
        <div class="extra">
          <el-button type="primary" @click="add">添加合同</el-button>
        </div>
      </div>
    </template>
    <!-- 搜索表单 -->
    <el-form>
      <el-form-item label="查询条件:">
        <el-input
          v-model="findmodel.str"
          placeholder="请输入查询内容"
          style="width: 300px"
        ></el-input>
        <el-button type="primary" @click="stafflist" style="margin-left: 15px"
          >搜索</el-button
        >
        <el-button @click="cleardata">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 文章列表 -->
    <el-table :data="majors" style="width: 100%">
      <el-table-column label="合同编号" prop="id" width="80"></el-table-column>
      <el-table-column label="合同名称" prop="name"></el-table-column>
      <el-table-column
        label="客户名称"
        prop="quote.chance.clientCompany.clientcompanyname"
      ></el-table-column>
      <el-table-column label="签订时间" prop="signedtime"></el-table-column>
      <el-table-column label="交货期" prop="deliverytime"></el-table-column>
      <el-table-column label="总价" prop="quote.allprices"></el-table-column>
      <el-table-column label="备注" prop="comment"></el-table-column>
      <el-table-column label="操作" width="195">
        <template #default="{ row }">
          <el-button
            :icon="Edit"
            circle
            plain
            type="primary"
            @click="showDialog(row)"
          ></el-button>
          <el-button
            :icon="Delete"
            circle
            plain
            type="danger"
            @click="del(row)"
          ></el-button>
          <el-button :icon="Promotion" circle plain type="primary" @click="approval(row)"></el-button>
          <el-button :icon="Bell" circle plain type="primary" @click="getApprovalTrace(row)"></el-button>
  
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="没有数据" />
      </template>
    </el-table>
    <!-- 分页条 -->
    <el-pagination
      v-model:current-page="findmodel.pageNum"
      v-model:page-size="findmodel.pageSize"
      :page-sizes="[5, 10, 15, 20]"
      layout="jumper, total, sizes, prev, pager, next"
      background
      :total="total"
      @size-change="onSizeChange"
      @current-change="onCurrentChange"
      style="margin-top: 20px; justify-content: flex-end"
    />
  </el-card>
  <!-- 添加分类弹窗 -->
  <el-dialog v-model="dialogVisible" :title="title" width="60%">
    <el-tabs
      v-model="activeTab"
      @tab-click="handleTabClick"
      style="margin-top: -30px"
    >
      <el-tab-pane label="合同信息" name="first">
        <el-form
          :model="pathmodel"
          ref="formref"
          :rules="rules"
          label-width="90px"
          style="padding-right: 30px"
        >
          <el-row>
            <el-col :span="6">
              <el-form-item label="报价列表" prop="quoteid">
                <el-select
                  placeholder="请选择..."
                  clearable
                  style="width: 350px"
                  @change="handleQuoteChange"
                  v-model="pathmodel.quoteid"
                >
                  <el-option
                    v-for="c in quotes"
                    :key="c.id"
                    :label="c.quotename"
                    :value="c.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="合同名称" prop="name">
                <el-input v-model="pathmodel.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="总价" prop="allprices">
                <el-input v-model="pathmodel.allprices" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="签订日期" prop="signedtime">
                <el-date-picker
                  v-model="pathmodel.signedtime"
                  style="width: 350px"
                  type="date"
                  placeholder="请选择..."
                  format="YYYY/MM/DD"
                  value-format="YYYY-MM-DD"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="排产日期" prop="paichantime">
                <el-date-picker
                  v-model="pathmodel.paichantime"
                  style="width: 350px"
                  type="date"
                  placeholder="请选择..."
                  format="YYYY/MM/DD"
                  value-format="YYYY-MM-DD"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="交货日期" prop="deliverytime">
                <el-date-picker
                  v-model="pathmodel.deliverytime"
                  style="width: 350px"
                  type="date"
                  placeholder="请选择..."
                  format="YYYY/MM/DD"
                  value-format="YYYY-MM-DD"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="货物到站" prop="goodsarrival">
                <el-input v-model="pathmodel.goodsarrival"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="运费支付" prop="freightpay">
                <el-input v-model="pathmodel.freightpay"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="付款方式" prop="payway">
                <el-input
                  type="textarea"
                  :rows="4"
                  v-model="pathmodel.payway"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注" prop="comment">
                <el-input
                  type="textarea"
                  :rows="4"
                  v-model="pathmodel.comment"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="basic-info-border">
            <el-row>
              <el-col :span="8">
                <el-form-item label="订货单位" prop="clientcompanyname">
                  <el-input
                    v-model="pathmodel.clientcompanyname"
                    disabled
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="订货代表" prop="orderdaibiao">
                  <el-input
                    v-model="pathmodel.orderdaibiao"
                    disabled
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="订货电话" prop="phone">
                  <el-input
                    v-model="pathmodel.phone"
                    disabled
                    style="width: 173px"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="订货地址" prop="address">
                  <el-input v-model="pathmodel.address" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="订货邮编" prop="zipcode">
                  <el-input v-model="pathmodel.zipcode" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="订货片区" prop="areaname">
                  <el-input
                    v-model="pathmodel.areaname"
                    disabled
                    style="width: 173px"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="细目" name="second">
        <el-table :data="productions" style="width: 100%">
          <el-table-column label="产品类型" prop="type"></el-table-column>
          <el-table-column label="产品型号" prop="model"></el-table-column>
          <el-table-column label="产品名称" prop="name"></el-table-column>
          <el-table-column label="报价(单价)" prop="price"></el-table-column>
          <el-table-column
            label="选择数量"
            prop="selectnumber"
          ></el-table-column>
          <el-table-column label="报价(总价)" prop="allprice"></el-table-column>
          <el-table-column label="备注" prop="comment"></el-table-column>
          <template #empty>
            <el-empty description="没有数据" />
          </template>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="付款阶段" name="third">
        <el-table :data="payphases" style="width: 100%">
          <el-table-column label="付款阶段" prop="name"></el-table-column>
          <el-table-column label="应付金额" prop="oughtpay"></el-table-column>
          <el-table-column label="已付金额" prop="paypay"></el-table-column>
          <el-table-column label="应付日期" prop="oughttime"></el-table-column>
          <el-table-column label="备注" prop="comment"></el-table-column>
          <el-table-column label="操作" width="60">
            <template #default="{ row }">
              <el-button
                :icon="Delete"
                circle
                plain
                type="danger"
                :disabled="row.paypay!=0"
                @click="delphase(row)"
              ></el-button>
            </template>
          </el-table-column>
          <template #empty>
            <el-empty description="没有数据" />
          </template>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <template #footer>
      <el-button
        style="display: flex; margin-bottom: -30px"
        type="primary"
        @click="addphasepre"
        v-if="activeTab == 'third'"
        >添加付款阶段</el-button
      >
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click="title == '添加合同' ? addstaff() : updatestaff()"
        >
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>

  <el-dialog v-model="dialogVisiblephase" :title="titlephase" width="27%">
    <el-form
      :model="pathmodelphase"
      ref="formrefphase"
      :rules="rules"
      label-width="100px"
      style="padding-right: 30px"
    >
      <el-form-item label="付款阶段" prop="name">
        <el-input
          v-model="pathmodelphase.name"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="应付金额" prop="oughtpay">
        <el-input
          v-model="pathmodelphase.oughtpay"
          type="number"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="应付日期" prop="oughttime">
        <el-date-picker
          v-model="pathmodelphase.oughttime"
          style="width: 350px"
          type="date"
          placeholder="请选择..."
          format="YYYY/MM/DD"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item label="备注" prop="comment">
        <el-input
          v-model="pathmodelphase.comment"
          type="textarea"
          :rows="5"
          placeholder="请输入备注"
        >
        </el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisiblephase = false">取消</el-button>
        <el-button
          type="primary"
          @click="titlephase == '添加付款阶段' ? addphase() : updatephase()"
        >
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>



  <el-dialog v-model="dialogVisible2" :title="title" width="50%" >
    <el-form :model="tempUserModel" :rules="rules2" label-width="90px" style="padding-right: 30px">
      <div class="basic-info-border2">
        <el-row>
          <el-col :span="15">
            <el-form-item label="片区负责人" prop="pathName">
              <el-select  v-model="tempUserModel.areaMaster" multiple placeholder="请选择片区负责人" style="width: 200px;">
                <el-option v-for="c in areaMasterOptions" :key="c.id" :label="c.name" :value="c.id"
                 >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item>
              <el-button type="primary" @click="addapprovalMaster1"> 确认 </el-button>
            </el-form-item>

          </el-col>
          <el-col :span="3">
            <el-form-item>
              <el-button type="danger" @click="delapprovalMaster"> 删除 </el-button>
            </el-form-item>

          </el-col>
        </el-row>
      </div>
      <div class="basic-info-border3 max-width-box">

        <el-row>
          <el-col :span="15">
            <el-form-item label="部门负责人" prop="pathName">

              
              <el-select v-model="tempUserModel.sectorMaster" multiple placeholder="请选择部门领导" style="width: 200px;">
                <el-option v-for="item in sectorMasterOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item>
              <el-button type="primary" @click="addapprovalMaster2"> 确认 </el-button>
            </el-form-item>

          </el-col>
          <el-col :span="3">
            <el-form-item>
              <el-button type="danger" @click="delapprovalMaster2"> 删除 </el-button>
            </el-form-item>

          </el-col>
        </el-row>

      </div>
      <div class="basic-info-border4">
        <el-row>
          <el-col :span="15">
            <el-form-item label="公司领导" prop="pathName">


              <el-select v-model="tempUserModel.companyMaster" multiple placeholder="请选择公司领导" style="width: 200px;">
                <el-option v-for="item in companyMasterOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item>
              <el-button type="primary" @click="addapprovalMaster3"> 确认 </el-button>
            </el-form-item>

          </el-col>
          <el-col :span="3">
            <el-form-item>
              <el-button type="danger" @click="delapprovalMaster3"> 删除 </el-button>
            </el-form-item>

          </el-col>
        </el-row>

      </div>
      <div class="basic-info-border5">
        <el-row>
          <el-col :span="15">
            <el-form-item label="财务总监" prop="pathName">
              <el-select v-model="tempUserModel.financeMaster" multiple placeholder="请选择财务总监" style="width: 200px;">
                <el-option v-for="c in financeMasterOptions" :key="c.id" :label="c.name" :value="c.id"
                  >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item>
              <el-button type="primary" @click="addapprovalMaster4"> 确认 </el-button>
            </el-form-item>

          </el-col>
          <el-col :span="3">
            <el-form-item>
              <el-button type="danger" @click="delapprovalMaster4"> 删除 </el-button>
            </el-form-item>

          </el-col>
        </el-row>

      </div>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取消</el-button>
        <el-button type="primary" @click="addapproval"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>


  <el-dialog v-model="dialogVisible3" :title="title" width="40%">
    <el-form :model="tempUserModel" >

      <el-table :data="processes" style="width: 100%">
      <el-table-column label="结点" prop="nodes" width="100"></el-table-column>
      <el-table-column label="操作者" prop="user.name"></el-table-column>
      <el-table-column label="状态" prop="phase"></el-table-column>
      <el-table-column label="操作时间" prop="actiontime"></el-table-column>


      <template #empty>
        <el-empty description="没有数据" />
      </template>
    </el-table>



    </el-form>

  </el-dialog>

</template>

<style lang="scss" scoped>
.page-container {
  min-height: 100%;
  box-sizing: border-box;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.basic-info-border {
  border: 1px 0px 0px 0px solid #dcdfe6;
  border-radius: 4px;
  right: -10px;
  position: relative;
  padding-top: 30px;
  /* 增加内边距，为标题留出更多空间 */
  margin-right: -10px;
  /* 调整外边距，使边框线不重合 */
}

.basic-info-border::before {
  content: "订货单位信息";
  position: absolute;
  top: -10px;
  /* 将标题移动到边框上方 */
  left: -10px;

  /* 根据需要调整左边距 */
  background-color: #409eff;
  color: white;
  padding: 5px;
  border-radius: 3px;
  font-weight: bold;
}




.el-button {
  margin-left: 10px;
  /* 或者根据需要调整 */
}

.basic-info-border2 {
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    right: -10px;
    position: relative;
    padding-top: 30px;
    /* 增加内边距，为标题留出更多空间 */
    margin-right: -10px;
    /* 调整外边距，使边框线不重合 */
}

.basic-info-border2::before {
    content: "片区负责人";
    position: absolute;
    top: -15px;
    /* 将标题移动到边框上方 */
    left: 10px;

    /* 根据需要调整左边距 */
    background-color: #409EFF;
    color: white;
    padding: 5px;
    border-radius: 3px;
    font-weight: bold;
}

.basic-info-border3 {
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    right: -10px;
    position: relative;
    padding-top: 30px;
    /* 增加内边距，为标题留出更多空间 */
    margin-right: -10px;
    /* 调整外边距，使边框线不重合 */
}

.basic-info-border3::before {
    content: "部门负责人";
    position: absolute;
    top: -15px;
    /* 将标题移动到边框上方 */
    left: 10px;

    /* 根据需要调整左边距 */
    background-color: #409EFF;
    color: white;
    padding: 5px;
    border-radius: 3px;
    font-weight: bold;
}

.basic-info-border4 {
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    right: -10px;
    position: relative;
    padding-top: 30px;
    /* 增加内边距，为标题留出更多空间 */
    margin-right: -10px;
    /* 调整外边距，使边框线不重合 */
}

.basic-info-border4::before {
    content: "公司领导";
    position: absolute;
    top: -15px;
    /* 将标题移动到边框上方 */
    left: 10px;

    /* 根据需要调整左边距 */
    background-color: #409EFF;
    color: white;
    padding: 5px;
    border-radius: 3px;
    font-weight: bold;
}


.basic-info-border5 {
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    right: -10px;
    position: relative;
    padding-top: 30px;
    /* 增加内边距，为标题留出更多空间 */
    margin-right: -10px;
    /* 调整外边距，使边框线不重合 */
}

.basic-info-border5::before {
    content: "财务总监";
    position: absolute;
    top: -15px;
    /* 将标题移动到边框上方 */
    left: 10px;

    /* 根据需要调整左边距 */
    background-color: #409EFF;
    color: white;
    padding: 5px;
    border-radius: 3px;
    font-weight: bold;
}

</style>
